<template>
	<view class="e-cascader-node">
		<view class="e-cascader-node__item" 
			v-for="item in columns" :key="item.uid" :style="[itemStyle]" @tap="handlerClick(item)">
			<text class="e-cascader-node__item-text" :class="{'e-cascader-node__item--active':item.checked}">{{ item.label}}</text>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		defineComponent,
		computed,
		inject
	} from 'vue'
	import {
		deepMerge
	} from "../../libs/utils"
	import {
		addStyle,
		addUnit
	} from "../../libs/utils/_utils"
	import {
		Node,
		CASCADER_INJECTION_KEY
	} from './util'

	import type {
		PropType
	} from 'vue'

	export default defineComponent({
		name: 'ECascaderNode',
		props: {
			columns: {
				type: Array as PropType < Node[] > ,
				default: () => [] as Node[]
			},
			itemHeight: {
				type: [String, Number],
				default: 32,
			},
			itemCustomStyle: {
				type: [Object, String],
				default: () => ({}),
			}
		},
		emits: ['click'],
		setup(props,{emit}) {
			const panel = inject(CASCADER_INJECTION_KEY) !
				const itemStyle = computed(() => {
					return deepMerge({
						height: addUnit(props.itemHeight)
					}, addStyle(props.itemCustomStyle))
				})

			const handlerClick = (node: Node) => {
				let {
					isDisabled
				} = node
				if (
					!isDisabled &&
					!panel.config.multiple
				) {
					node.doCheck(true);
					!node.loaded && doLoad(node)
				} else {
					handleExpand(node)
				}
				emit('click',node)
			}
			const handleExpand = (node: Node) => {
				if (node.loading) return
				node.loaded ? undefined : doLoad(node)
			}
			const doLoad = (node: Node) => {
				panel.lazyLoad(node)
			}
			return {
				itemStyle,
				handlerClick
			}
		}
	})
</script>

<style lang="scss" scoped>
	@import '../../libs/theme/cascader-node.scss';
</style>
